<template>
	<div>
		<div>
			<el-button-group style="margin-left: 100px;margin-bottom: 10px;">
				<el-button type="primary" icon="el-icon-edit">添加</el-button>
			</el-button-group>
		</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="id" label="类目ID">
			</el-table-column>
			<el-table-column prop="name" label="类目名">
			</el-table-column>
			<el-table-column prop="iconUrl" label="类目图标">
				<template slot-scope="scope">
					<img width="40px" height="40px" :src="scope.row.iconUrl" v-if="scope.row.iconUrl" />
				</template>
			</el-table-column>
			<el-table-column prop="picUrl" label="类目图片">
				<template slot-scope="scope">
					<img width="80px" height="80px" :src="scope.row.picUrl" v-if="scope.row.picUrl" />
				</template>
			</el-table-column>
			<el-table-column prop="keywords" label="关键字">
			</el-table-column>
			<el-table-column prop="desc" label="简介">
			</el-table-column>
			<el-table-column prop="level" label="级别">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.level=='L1'">一级类目</el-tag>
					<el-tag v-else type="info">二级类目</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="operation" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {
		categoryList,
		categoryDelete
	} from '../../utils/axios.js'
	export default {
		data() {
			return {

				tableData: []
			}
		},
		created() {
			this.category()
		},
		methods: {
			category() {
				categoryList().then(res => {
					console.log(res);
					this.tableData = res.data.data.list
				})
			},


			handleEdit(index, row) {
				console.log(index, row);
			},
			
			//删除
			handleDelete(index, row) {
				console.log(index, row);
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					categoryDelete(row).then(res => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						});
						this.category() //删除后重新渲染
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	/* //字体居中 */
	/deep/.cell {
		text-align: center;
	}
</style>
